<%--
  User: zhangteng
  Date: 2015/1/4 19:48
--%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>商品订单</title>
    <%@include file="../../common/head.jsp" %>
</head>

<body>
<%@include file="../../common/header.jsp" %>

<div class="main-container" id="main-container">

    <div class="main-container-inner">
        <a class="menu-toggler" id="menu-toggler" href="#">
            <span class="menu-text"></span>
        </a>

        <div class="sidebar" id="sidebar">
            <%@include file="../../common/sidebar.jsp" %>
            <%@include file="../../common/menu.jsp" %>
            <!-- /.nav-list -->

        </div>

        <div class="main-content">
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="icon-home home-icon"></i>
                        <a href="#">音像商店管理系统</a>
                    </li>
                    <li>借阅管理</li>
                    <li class="active">订单列表</li>
                </ul>
                <!-- .breadcrumb -->
            </div>

            <div class="page-content">
                <div class="page-header">
                    <h1>
                        订单列表
                    </h1>
                </div>
                <!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="col-sm-6 no-padding-left">
                                    <form class="form-horizontal" role="form" method="get"
                                          action="${website}admin/order">
                                        <div class="col-sm-4 no-padding-left">
                                            <select class="form-control">
                                                <option value="0">商品编号</option>
                                                <option value="1">订单编号</option>
                                                <option value="2">会员编号</option>
                                                <option value="3">订单状态</option>
                                            </select>
                                        </div>
                                        <div class="input-group col-sm-6 no-padding-left">

                                            <input type="text" placeholder="请输入关键字" class="form-control search-query"
                                                   name="search">
													<span class="input-group-btn">
														<button class="btn btn-purple btn-sm" type="submit">
                                                            搜索
                                                            <i class="icon-search icon-on-right bigger-110"></i>
                                                        </button>
													</span>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-sm-6 no-padding-right">
                                    <a class="btn btn-primary pull-right" href="${website}admin/order/new"><i
                                            class="icon-plus"></i>添加</a>
                                </div>
                            </div>
                        </div>

                        <div class="space-6"></div>

                        <div class="row">
                            <div class="col-xs-12">
                                <div class="table-responsive">
                                    <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>订单编号</th>
                                            <th>商品</th>
                                            <th>会员</th>
                                            <th>订单状态</th>
                                            <th>时间</th>
                                            <th>订单备注</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <c:forEach var="order" items="${orderList}" varStatus="status">
                                            <tr data-id="${order.id}">
                                                <td>${order.id}</td>
                                                <td>${productList[status.count]}</td>
                                                <td>${memberList[status.count]}</td>
                                                <td>
                                                    <c:if test="${order.status == 0}">
                                                        预约
                                                    </c:if>
                                                    <c:if test="${order.status == 1}">
                                                        借出
                                                    </c:if>
                                                    <c:if test="${order.status == 2}">
                                                        归还
                                                    </c:if>
                                                </td>
                                                <td><fmt:formatDate value="${order.time}"
                                                                    pattern="yyyy-MM-dd HH:mm" /></td>
                                                <td>${order.comment}</td>
                                                <td>
                                                    <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                                                        <button class="btn btn-sm btn-primary J_borrow" order-id="${order.id}">
                                                            借出
                                                        </button>
                                                        <a href="#" class="btn btn-sm btn-danger J_del">
                                                            <i class="icon-trash bigger-120"></i>
                                                        </a>
                                                    </div>

                                                    <div class="visible-xs visible-sm hidden-md hidden-lg">
                                                        <div class="inline position-relative">
                                                            <button class="btn btn-minier btn-primary dropdown-toggle"
                                                                    data-toggle="dropdown">
                                                                <i class="icon-cog icon-only bigger-110"></i>
                                                            </button>

                                                            <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                                <li>
                                                                    <a href="${website}admin/order/update/${order.id}"
                                                                       class="tooltip-success" data-rel="tooltip"
                                                                       title="Edit">
                                                                        借出
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#" class="tooltip-success J_del"
                                                                       data-rel="tooltip" title="Edit">
                                                                                    <span class="red">
                                                                                        <i class="icon-trash bigger-120"></i>
                                                                                    </span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->

                                <ul class="pagination pull-right">
                                    <li class="prev">
                                        <a href="${website}/admin/order/list?pageNo=${page.prevPage}">
                                            <i class="icon-double-angle-left"></i>
                                        </a>
                                    </li>
                                    <c:forEach var="pageNo" items="${page.pageList}">
                                        <c:choose>
                                            <c:when test="${pageNo == page.currentPage}">
                                                <li class="active">
                                                    <a href="${website}/admin/order/list?pageNo=${pageNo}">${pageNo}</a>
                                                </li>
                                            </c:when>
                                            <c:otherwise>
                                                <li>
                                                    <a href="${website}/admin/order/list?pageNo=${pageNo}">${pageNo}</a>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                    <li class="next">
                                        <a href="${website}/admin/order/list?pageNo=${page.nextPage}">
                                            <i class="icon-double-angle-right"></i>
                                        </a>
                                    </li>
                                </ul>

                            </div>
                        </div>
                        <!-- /row -->
                        <!-- PAGE CONTENT ENDS -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
        <!-- /.main-content -->
    </div>
    <!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
</div>
<!-- /.main-container -->
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p class="J_content"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary J_yes">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade J_borrow_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p class="J_content">借出成功!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<%@include file="../../common/footer.jsp" %>
>
<script type="text/javascript" src="${staticWebsite}js/list.js"></script>
<script type="text/javascript">
    $(function ($) {
        $.list.init({
            url: '${website}admin/order/del'
        });

        $('.J_borrow').on('click', function(e) {
            var $orderId = $(this).attr('order-id'),
                    that = $(this);
            $.ajax({
                url: '${website}admin/order/status/' + $orderId + '/1',
                type: 'get',
                success: function(rs) {
                    $('.J_borrow_modal').modal();
                    console.log($(this));
                    that.attr('disabled', 'disabled');
                }
            });
        });
    });
</script>
</body>
</html>
